<template>
	<view>
		<TopNav title="生产基地"></TopNav>
		<view class="cu-card case">
			<view class="cu-item shadow padding" v-for="item in list" :key="item.id" @click=handleSelection(item)>
				<view class="flex align-center">
					<view class="shrink-0 padding-right-sm">
						<image :src="baseUrl + item.fileUrls" mode=""
							class="cu-avatar lg radius margin-bottom-xs bg-gray"></image>

						<u-tag text="当前" type="success" plain plainFill size="mini" class="shrink-0 justify-center"
							v-if="checkSelection(item)"> </u-tag>

						<van-button type="info" size="mini" icon="exchange" block v-else
							@click.stop="handleChangeSelection(item)">切换</van-button>
					</view>
					<view class="overflow-hidden" @click="handleToPage('detail',item)">
						<view class="flex padding-bottom-xs align-start">
							<text class="text-bold text-xxl text-cut">{{item.name}}</text>
							<u-tag text="负责人" type="warning" plain plainFill size="mini" class="shrink-0 padding-lr-xs">
							</u-tag>
						</view>
						<view class="">
							<text class="text-gray">基地面积：</text>
							<text>{{item.area || '-'}}亩</text>
						</view>
						<view class="text-cut">
							<text class="text-gray">详细地址：</text>
							<text>{{`${item.provinceName}/${item.cityName}/${item.districtName} ${item.address}`}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		list
	} from '@/api/mine/base'
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.config.baseUrl,
				queryParams: {
					// productionBaseId: undefined
				},
				selectionList: [],
				list: [],
				multiple: false
			}
		},
		onLoad(query) {
			(async () => {
				await this.getList()
				if (query.pondId) {
					let pondList = query.pondId.split(",")
					for (let id of pondList) {
						let findResult = this.list.find(item => item.culturePondId === id)
						this.handleSelection(findResult)
					}
				}
			})()

		},
		methods: {
			handleToPage(path, params) {
				switch (path) {
					case 'detail':
						this.$tab.navigateTo('./detail?id=' + params.id)
						break;
				}
			},
			checkSelection(obj) {
				return obj.id === this.$store.state.user.baseInfo.id
			},
			handleChangeSelection(obj) {
				let {
					id,
					name,
					districtName,
					districtId,
					cityName,
					cityId,
					provinceName
				} = obj
				this.$store.dispatch("ChangeBaseSelection", {
					id,
					name,
					districtName,
					districtId,
					cityName,
					cityId,
					provinceName
				})
			},
			async getList() {
				await list(this.queryParams).then(res => {
					this.list = res.rows
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/common/var.scss";
	page {
		@include fixed-bottom;
	}
	
</style>
<style scoped lang="scss">

	.selection {
		border: 1px solid #0081ff;
	}

	::v-deep .u-tag {
		justify-content: center;
	}
</style>